<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>热点事情排行榜</title>
<style type="text/css">
body{
	text-align:center;
}
table{
	width:600px;
	margin:0 auto;
	border:1px solid black;
}
#hotContent{
	
}
.abc{
	width:700px;
	margin:0 auto;
}
.header{
	height:50px;
	background-color:#eee;
}
.user_control{
	float:right;
	margin-right:60px;
	position:relative;
}
.user_form{
	border:1px solid #666;
	background-color:#eee;
	display:none;
	position:absolute;
	left:-100px;
	top:60px;
}
#user_info{
	display:none;
	float:left;
	margin-left:60px;
}
</style>
<link rel="stylesheet" href="themes/default/default.css" />
	<link rel="stylesheet" href="plugins/code/prettify.css" />
	<script charset="utf-8" src="kindeditor-all.js"></script>
	<script charset="utf-8" src="lang/zh-CN.js"></script>
	<script charset="utf-8" src="plugins/code/prettify.js"></script>
	<script>
	
		KindEditor.ready(function(K) {
			
			var editor1 = K.create('textarea[name="content1"]', {
				cssPath : 'plugins/code/prettify.css',
				uploadJson : '/upload/uploadjson',
				items:[
			        'source', '|', 'undo', 'redo', '|', 'preview', 'template', 'code', 'cut', 'copy', 'paste',
			        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
			        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
			        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
			        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
			        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
			        'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
			        'anchor', 'link', 'unlink', '|', 'about'
				],
				afterBlur: function () { this.sync(); }
			});
			
			prettyPrint();
			/*window.editor = K.create('#hotContent', {
		        afterBlur: function () { this.sync(); }
		    });*/
		});
	</script>
</head>
<body>
	<div class="header">
		<span id="user_info">欢迎:xxx</span>
		<div class="user_control">		
			<button onclick="haimei()">还没登录?</button>
			<button onclick="logout()">注销</button>
			<div class="user_form">
				<p>用户名:<input id="username"/></p>
				<p>密码:<input id="password"/></p>
				<p>
					<button onclick="login()">登录</button>
				</p>
			</div>
		</div>
	</div>
	<div>
		关键字:<input id="querykeyword"/> <button onclick="query()">查询</button>
	</div>
	<h1>热门事件排行榜</h1>
	<table>
		<thead>
			<tr>
				<th>关键字</th>
				<th>搜索指数</th>
				<th>创建时间</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	<div>
		<a href="javascript:void(0)" onclick="getFirstPage()">首页</a>
		<a href="javascript:void(0)" onclick="getPrePage()">上一页</a>
		<a href="javascript:void(0)" onclick="getNextPage()">下一页</a>
		<a href="javascript:void(0)" onclick="getLastPage()">末页</a>
		第<span id="pageIndex">x</span>页/共<span id="totalPage">y</span>页
	</div>
	<hr/>
	<div>
		<p>关键字:<input id="keyWord"/></p>
		<div class="abc">内容:<textarea id="hotContent" name="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"></textarea></div>
		<p><button onclick="addevent()">提交</button></p>
	</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var pageIndex = 1;//当前页数
var pages = 0;
var keyword = ''
var userobj = null

function query(){
	pageIndex = 1
	keyword = $("#querykeyword").val()
	getPage()
}

function getPage(){
	$.getJSON("hotevents/page",{"pageIndex":pageIndex,"keyword":keyword})
	.then(function(res){
		if(res.resultCode == 200){
			let events = res.data.records;
			pages = res.data.pages
			//console.log(events)
			$("tbody").empty()
			for(let i in events){
				let event = events[i]
				console.log(event.canEdit)
				//判断是否需要生成编辑标签
				let edit_a = event.canEdit?`<a href="edit.html?hid=${event.id}">编辑</a>`:''
				$("tbody").append(
					`<tr>
						<td><a href="detail.html?hid=${event.id}">${event.keyWord}</a></td>
						<td>${event.searchSum}</td>
						<td>${event.createDate}</td>
						<td>${edit_a}</td>
					</tr>`)	
			}
			$("#pageIndex").text(pageIndex)
			$("#totalPage").text(pages)
		}
	})
}

function checkedit(hid,uid){
	if(userobj == null){
		alert("你还没有登录")
		return
	}else if(uid != userobj.id){
		alert("你没有权限编辑该帖子")
		return
	}
	
	location.href = "edit.html?hid="+hid
}

function getFirstPage(){
	pageIndex = 1
	getPage()
}

function getLastPage(){
	pageIndex = pages
	getPage()
}

function getPrePage(){
	if(pageIndex == 1){
		return
	}
	pageIndex--
	getPage()
}

function getNextPage(){
	if(pageIndex == pages){
		return
	}
	pageIndex++
	getPage()
}

function addevent(){
	
	let params = {
			"keyWord":$("#keyWord").val(),
			"hotContent":$("#hotContent").val()
		}
	if(params.keyWord == "" || params.hotContent == ""){
		alert("请完整填写内容")
		return;
	}
	if(userobj == null){
		alert("请登录后再发表")
		return;
	}
	//console.log($('textarea[name="content1"]').val())
	console.log(params)
	
	$.ajax({
		url:"hotevents/add",
		type:"POST",
		data:params,
		dataType:"json",
		success:function(res){
			let comment = res.data
			console.log(comment)
			alert("添加热点事件成功")	
			getFirstPage();
			$("#keyWord").val("")
			$("#hotContent").val("")
		},
		error:function(res){
			//console.log(res)
			//提取返回内容中的字符串，再强转成json对象
			let resjson = JSON.parse(res.responseText)
			
			let code = resjson.resultCode
			let message = resjson.message
			alert("错误编码:" + code + ": " + message)
		}
	})
}

function haimei(){
	$(".user_form").fadeToggle(300);
}

function login(){
	let params = {
			"username":$("#username").val(),
			"password":$("#password").val()
	}
	$.getJSON("user/login",params,function(res){
		if(res.resultCode == 200){
			alert("登录成功")
			userobj = res.data;
			$("#user_info").html("欢迎,"+userobj.nickname).show()
		}else{
			alert("登录失败")
			$("#user_info").html("").hide()
		}
	})
}

function autologin(){
	$.getJSON("user/autologin",function(res){
		if(res.resultCode == 200){
			//alert("登录成功")
			userobj = res.data;
			$("#user_info").html("欢迎,"+userobj.nickname).show()
		}else{
			$("#user_info").html("").hide()
		}
	})
}

function logout(){
	$.getJSON("user/logout",function(res){
		if(res.resultCode == 200){
			alert("注销成功");
			//$("#user_info").html("").hide()
			location.href="index.html"
		}
	})
}

$(function(){
	autologin()
	getPage()
	
})
</script>
</html>
